<template>
	<view class="content">
		<view class="recharge-pannel">
			<div class="card-row">
				<i class="ali-icon balance-icon ">&#xe616;</i>
				<span style="margin-left: 5px;">&nbsp;&nbsp; 卡号：&nbsp;{{cardNumber}}</span>
			</div>
			<div class="selectPackageName">
				<i class="ali-icon " style="color: white;">&#xe729;</i>
				<span style="margin-left: 5px;color: white;">&nbsp;&nbsp; 选择充值金额</span>
			</div>
			<div class="packageDisplay">
				<div class="package-tiem warning-txt" v-if="pannenlList.length==0">
					<text style="margin-top:50px;">{{warningtxt}}</text>
				</div>
				<div class="package-tiem" v-for="(item,index) in pannenlList" v-bind:class="{'package-active':index==isActive}"
				 @click="checkItem(index,item)" :key="index">
					<div class="package-row-1">{{item.price}} 元</div>
					<div class="package-row-2">售价：{{item.afterDiscountPrice}}元</div>
				</div>
			</div>
			<div class="rechargeButton">
				<button type="primary" class="ok-btn" @click="recharge">微信充值</button>
			</div>

		</view>
	</view>
</template>

<script>
	import pay from '@/utils/wxpayUtils.js'

	export default {
	
		data() {
			return {
				listCardBalanceUrl: '/balanceRecharge/listCardBalance',
				rechargeUrl: '/balanceRecharge/createRechargeBalanceOrder',
				title: '余额',
				cardNumber: '',
				cardId: '',
				pannenlList: [],
				isActive: -1,
				selectDetail: null,
				warningtxt:"正在查询..."
			}
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.cardNumber = option.cardNumber
			this.cardId = option.cardId
			//
			this.listBalanceDetail()
		},
		methods: {
		
			listBalanceDetail() {
				this.$req.userRecharge(this.listCardBalanceUrl, {
					id: this.cardId
				}).then(v => {
						
					if(v.data.length!=0){
						this.pannenlList = v.data
					}else{
						this.warningtxt = "暂无可用的余额套餐"
					}
					
				})
			},
			checkItem(index, item) {
				this.isActive = index
				this.selectDetail = item.id
				this.s = index
			},
			recharge() {
				if (this.selectDetail == null) {
					this.$message("请选择套餐！")
					return
				}
				this.$req.userRecharge(this.rechargeUrl, {
					id: this.selectDetail,
					cardId: this.cardId,
					cardNumber:this.cardNumber
				}).then(v => {
					pay(v.data, () => {
						this.$message("充值成功！")
						uni.navigateTo({
							url: '/pages/cardController/cardController?cardId=' + this.cardId 
							
						});
					})
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		text-align: center;
		height: calc(100vh - 44px);
		background-color: white;
	}

	.recharge-pannel {
		background-color: white;

	}

	.card-row {
		display: flex;
		flex-direction: row;
		font-size: large;
		align-items: center;
		height: 40px;
		padding-left: $left-10;
	}

	.card-png {
		width: 14px;
		height: 12px;
	}

	.selectPackageName {
		font-size: 36rpx;
		height: 48px;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 500;
		padding-left: $left-10;
		background-color: $theme-color;
	}

	.taocan-png {
		width: 13px;
		height: 13px;
	}

	.packageDisplay {
		min-height: 180px;
		width: 93%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 3.5vw 3.5%;
	}

	.package-tiem {
		position: relative;
		border: 1px solid $theme-color;
		height: 80px;
		width: calc(28vw - 2px);
		border-radius: 10px;
		margin: 10rpx 1.5vw;
	}

	.topright {
		width: 0;
		height: 0;
		transform: rotate(90deg);
		border-width: 20px;
		border-color: #315baf transparent transparent #315baf;
		border-style: solid;
		border-top-left-radius: 10px;
		margin-top: -1px;
		right: 0px;
		position: absolute;
	}

	.addFont {
		font-size: 0.29rem;
		text-align: center;
		color: white;
		right: 3px;
		position: absolute;
	}

	.package-row-1 {
		width: 100%;
		margin-top: 15px;
		font-size: x-large;
		text-align: center;
		color: #315baf;
	}

	.package-row-2 {
		font-size: small;
		width: 100%;
		text-align: center;
		margin-top: 2px;
		color: #315baf;
		;
	}

	.package-active {
		background-color: #e8edff;
	}

	.rechargeButton {
		padding-left: $left-10;
		padding-right: $left-10;
		margin-top: $left-10;
	}

	.ok-btn {
		border: 1px solid $theme-color;

	}

	.balance-icon {
		color: $theme-color;
	}
	.warning-txt{
		color: $theme-color;
	
	}
</style>
